<template>
  <div class="smark-system-features">
    <h1>Smark 账本后台管理系统</h1>
    <nav class="feature-navigation">
      <ul>
        <li><a href="#user-management">用户管理</a></li>
        <li><a href="#ledger-management">账本管理</a></li>
      </ul>
    </nav>

    <section id="user-management" class="feature-section">
      <h2>用户管理功能</h2>
      <div class="feature-cards">
        <div class="feature-card" @click="showFeatureDetails('登录功能')">
          <h3>1. 管理员登录</h3>
          <p>支持管理员通过用户名和密码安全登录系统，保护后台管理权限。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('新增用户')">
          <h3>2. 管理员新增用户</h3>
          <p>管理员可以添加新用户，设置初始密码和权限级别。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('删除用户')">
          <h3>3. 管理员删除用户</h3>
          <p>管理员可以移除不再需要的用户账户，确保系统安全性。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('获取所有用户')">
          <h3>4. 管理员获取所有用户</h3>
          <p>查看系统中的所有用户列表，便于集中管理和监控。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('获取指定用户详情')">
          <h3>5. 管理员获取指定用户详情信息</h3>
          <p>获取特定用户的详细信息，包括账户状态、访问历史等。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('修改用户信息')">
          <h3>6. 管理员修改指定用户信息（包括密码）</h3>
          <p>更新用户的基本信息和密码，确保账户安全和信息准确。</p>
        </div>
      </div>
    </section>

    <section id="ledger-management" class="feature-section">
      <h2>账本管理功能</h2>
      <div class="feature-cards">
        <div class="feature-card" @click="showFeatureDetails('新增账本数据')">
          <h3>7. 管理员新增指定用户的账本数据</h3>
          <p>为特定用户创建新的账本记录，支持多种分类和详细备注。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('删除账本数据')">
          <h3>8. 管理员删除指定用户的账本数据</h3>
          <p>移除用户不再需要或不再准确的账本记录，保持数据整洁。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('修改账本数据')">
          <h3>9. 管理员修改指定用户的账本数据</h3>
          <p>更新已存在的账本记录，确保数据的准确性和完整性。</p>
        </div>
        <div class="feature-card" @click="showFeatureDetails('查询账本数据')">
          <h3>10. 管理员查询指定用户的账本数据</h3>
          <p>检索用户的账本记录，支持按日期、类别和关键字筛选。</p>
        </div>
      </div>
    </section>
    <FeatureDetails v-if="showDetails" :feature="selectedFeature" @close="showDetails = false"/>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showDetails = ref(false);
    const selectedFeature = ref(null);

    const showFeatureDetails = (featureName) => {
      selectedFeature.value = featureName;
      showDetails.value = true;
    };

    return { showDetails, selectedFeature, showFeatureDetails };
  },
  components: {
    FeatureDetails: {
      template: `
        <div class="feature-details-modal" @click.self="$emit('close')">
          <div class="modal-content">
            <span class="close-btn" @click="$emit('close')">&times;</span>
            <h2>{{ feature }}</h2>
            <p>此功能旨在提供安全、高效、直观的用户管理和服务体验，确保系统稳定运行和数据安全。</p>
            <p>更多详细信息请联系系统管理员或查阅系统文档获取完整功能说明和使用指南。</p>
          </div>
        </div>
      `,
      props: ['feature'],
      emits: ['close']
    }
  }
};
</script>

<style scoped>
.smark-system-features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

.feature-navigation {
  margin-bottom: 40px;
}

.feature-navigation ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.feature-navigation a {
  text-decoration: none;
  color: #3498db;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.feature-navigation a:hover {
  background-color: #f0f8ff;
}

.feature-section {
  margin-bottom: 50px;
}

.feature-section h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.feature-section h2::after {
  content: '';
  display: block;
  width: 200px;
  height: 3px;
  background-color: #3498db;
  margin: 10px auto;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
  color: #3498db;
  font-size: 18px;
  margin-bottom: 10px;
}

.feature-card p {
  color: #7f8c8d;
  font-size: 14px;
}

.feature-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #7f8c8d;
}

@media (max-width: 768px) {
  .feature-cards {
    grid-template-columns: 1fr;
  }

  .feature-navigation {
    margin-bottom: 30px;
  }

  .feature-navigation ul {
    flex-wrap: wrap;
  }
}
</style>